<template>
    <div>
        <Button class="mybtn" icon="md-add-circle" @click="addScoreitem" type="success" size="small">添加</Button>
        <div v-for="item in data">
            <Card :padding=0 class="mycard" bordered>
                <p slot="title">
                    <Icon type="md-apps"/>
                    {{item[0].scode}}
                </p>
                <Table context-menu
                       show-context-menu
                       size="small"
                       :loading="loading"
                       :columns="columns"
                       @on-contextmenu="handleContextMenu"
                       :data="item">
                    <template  slot="contextMenu">
                        <div>
                            <DropdownItem @click.native="editRow">
                                <Icon type="md-build"/>
                                编辑
                            </DropdownItem>
                            <DropdownItem @click.native="deleteRow" style="color: #ed4014">
                                <Icon type="md-trash"/>
                                删除
                            </DropdownItem>
                        </div>
                    </template>
                </Table>
            </Card>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            modal: {
                evaluate: {}
            }
        },
        name: "scoreitem",
        data() {
            return {
                data: new Array(),
                loading: false,
                ContextMenuIndex: new Array(),
                columns: [
                    {
                        title: '内容',
                        key: "content"
                    },
                    {
                        title: '分数',
                        width: 80,
                        key: "fraction"
                    },
                ],
                tableScode: new Array(),
                newData: {
                    content: null,
                    fraction: null,
                    scode: 'select',
                    flag: false
                }
            }
        },
        methods: {
            /**
             * 获取全部数据
             */
            getAllScoreitemById() {
                this.loading = true
                this.tableScode = []
                this.http.get(`/scoreitem/getAllScoreitemById/${this.modal.evaluate.eid}`).then(res => {
                    new Set(res.data.map(m => {
                        return m.scode
                    })).forEach(f => {
                        this.tableScode.push(f)
                    })
                    this.data = this.tableScode.map(m => {
                        return res.data.filter(f => f.scode == m)
                    })
                    let array = JSON.stringify(this.tableScode)
                    sessionStorage.setItem("scoreitem", array)
                }).finally(f => {
                    this.loading = false
                })
            },
            /**
             * 编辑除行
             */
            editRow() {
                let row = {}
                let that = this
                Object.assign(row, this.data[this.ContextMenuIndex[0]][this.ContextMenuIndex[1]])
                this.$Modal.confirm({
                    title: "修改",
                    render: (h) => {
                        return <div>
                            <br/>
                            <i-form label-width={40}>
                                <form-item label="内容">
                                    <i-input v-model={row.content}/>
                                </form-item>
                                <form-item label="分数">
                                    <i-input v-model={row.fraction} type="number"/>
                                </form-item>
                            </i-form>
                        </div>
                    },
                    onOk() {
                        that.http.put("/scoreitem/saveUpdateScoreitem", that.qs.parse(row)).then(res => {
                            if (res.data) {
                                that.$Message.success({
                                    background: true,
                                    content: "更新成功"
                                })
                                Object.assign(that.data[that.ContextMenuIndex[0]][that.ContextMenuIndex[1]], row)
                            }
                        })
                    }
                })
            },
            /**
             * 删除行
             */
            deleteRow() {
                let sid = this.data[this.ContextMenuIndex[0]][this.ContextMenuIndex[1]].sid
                this.http.delete(`/scoreitem/deleteScoreitem/${sid}`).then(res => {
                    if (res.data) {
                        this.$Message.success({
                            background: true,
                            content: "删除成功"
                        })
                        this.data[this.ContextMenuIndex[0]].splice(this.ContextMenuIndex[1], 1)
                    }
                })
            },
            /**
             * 鼠标右键获取的数据
             * @param row
             */
            handleContextMenu(row) {
                this.data.forEach((m, index) => {
                    let ind = m.findIndex(f => f.content == row.content)
                    if (ind != -1) {
                        this.ContextMenuIndex = new Array(index, ind)
                    }
                })
            },
            /**
             * 添加数据
             */
            addScoreitem() {
                let that = this
                this.newData = {
                    content: null,
                    fraction: null,
                    scode: 'select',
                    flag: false
                }
                this.$Modal.confirm({
                    title: "添加",
                    render: () => {
                        return <div>
                            <br/>
                            <i-form label-width={40}>
                                <form-item label="内容">
                                    <i-input v-model={this.newData.content}/>
                                </form-item>
                                <form-item label="分数">
                                    <i-input v-model={this.newData.fraction} type="number"/>
                                </form-item>
                                <form-item v-show={this.modal.evaluate.etype == 2} label="表号">
                                    <i-select v-show={!this.newData.flag}
                                              onOn-select={(e) => {
                                                  this.newData.flag = e.value == ""
                                              }}
                                              v-model={this.newData.scode}>
                                        {
                                            this.tableScode.map(m => {
                                                return <i-option value={m}>{m}</i-option>
                                            })
                                        }
                                        <i-option value="">新表号</i-option>
                                    </i-select>
                                    <Row v-show={this.newData.flag}>
                                        <i-col span="21">
                                            <i-input v-model={this.newData.scode}/>
                                        </i-col>
                                        <i-col span="3">
                                            <i-button style="margin-left: 7px;" icon="md-arrow-back" onClick={() => {
                                                this.newData.flag = !this.newData.flag
                                            }}></i-button>
                                        </i-col>
                                    </Row>
                                </form-item>
                            </i-form>
                        </div>
                    },
                    onOk() {
                        if (that.modal.evaluate.etype == 1) {
                            that.newData.scode = "默认表"
                        }
                        for (let key in that.newData) {
                            if (that.newData[key] != '0' && !that.newData[key]) {
                                return that.$Message.error('请完善数据!');
                            }
                        }
                        that.newData.eid = that.modal.evaluate.eid
                        that.http.post("/scoreitem/saveAddScoreitem", that.qs.parse(that.newData)).then(res => {
                            if (res.data) {
                                that.$Message.success({
                                    background: true,
                                    content: "添加成功"
                                })
                                that.newData = {}
                                that.getAllScoreitemById()
                            }
                        })
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .mybtn {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .mycard {
        margin-right: 14px;
        margin-bottom: 10px;
        border-bottom: 0px;
    }
</style>
